<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <!-- 搜索 -->
      <el-form inline>
        <el-form-item label="关键词">
          <el-input v-model="processName" clearable placeholder="关键词" style="width: 200px;" class="filter-item"
            @keyup.enter.native="search" />
        </el-form-item>
        <el-form-item label="消息等级">
          <el-select v-model="level" clearable placeholder="消息等级" class="filter-item" style="width: 130px"
            @change="search">
            <el-option v-for="item in levelOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="所属模块">
          <el-select v-model="moduleType" clearable placeholder="所属模块" class="filter-item" style="width: 130px"
            @change="search">
            <el-option v-for="item in moduleTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-button class="filter-item" type="success" icon="el-icon-search" @click="search">搜索</el-button>
        <!-- 新增 -->
        <el-button type="danger" class="filter-item" icon="el-icon-refresh" @click="search">刷新</el-button>
        <el-button type="success" style="float: right;" icon="el-icon-check" @click="readAll">全部已读</el-button>

      </el-form>

    </div>
    <el-card v-for="(item, index) in massageList" :key="index" class="list-item" shadow="hover"
      @click.native="messageDetail(item)">
      <div class="list-item-content">
        <div :class="{ 'new': item.status == 0 }" class="title">
          <el-badge v-if="item.status == 0" is-dot class="item"> {{ item.content }}</el-badge>
          <span v-else> {{ item.content }}</span>
        </div>
        <div>{{ item.sendTime }}</div>
      </div>
    </el-card>
    <!--分页组件-->
    <el-pagination :total="total" :current-page="pageNum" style="margin-top: 8px;"
      layout="total, prev, pager, next, sizes" @size-change="sizeChange" @current-change="pageChange" />
  </div>
</template>

<script>
// import checkPermission from '@/utils/permission'
// import { formatTime } from '@/utils/index'
// import { messageSearch, messageRead, messageReadAll } from '@/api/approve'
// import { getToken } from '@/utils/auth'
export default {
  data() {
    return {
      level: '',
      moduleType: '',
      processName: '',
      pageNum: 1,
      pageSize: 10,
      total: 0,
      loading: false,
      massageList: [],
      levelOptions: [
        { value: 10, label: '非常紧急' },
        { value: 11, label: '紧急' },
        { value: 12, label: '普通' }
      ],
      // 10: 新闻 11:公告 12: 日程 13: 工作流审批 14: 工作流传阅 15: 通用类型 30: 平台消息
      moduleTypeOptions: [
        { value: 10, label: '新闻' },
        { value: 11, label: '公告' },
        { value: 12, label: '日程' },
        { value: 13, label: '工作流审批' },
        { value: 14, label: '工作流传阅' },
        { value: 15, label: '通用类型' },
        { value: 30, label: '平台消息' }
      ]
    }
  },
  created() {
    this.$nextTick(() => {
      // this.init()
      // this.getData()
    })
  },
  methods: {
    getData() {
      this.loading = true
      const params = {
        level: this.level,
        module: this.module,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      messageSearch(params).then(res => {
        this.massageList = res.item.records
        this.total = res.item.total
        this.loading = false
      })
    },
    search() {
      this.getData()
    },
    // 当前页改变
    pageChange(e) {
      this.pageNum = e
      this.getData()
    },
    // 每页条数改变
    sizeChange(e) {
      this.pageSize = e
      this.pageNum = 1
      this.getData()
    },
    messageDetail(item) {
      messageRead(item.id).then(res => {
        // if (item.link) {
        //   window.open(item.link + getToken())
        // }
        this.search()
      })
    },
    readAll() {
      messageReadAll().then(res => {
        this.$message.success('已将所有消息标记已读')
        this.search()
      })
    }
  }
}
</script>

<style scoped lang="scss">
.list-item {
  margin-bottom: 15px;
  cursor: pointer;

  &-content {
    display: flex;
    justify-content: space-between;
  }
}

.new {
  // position: relative;
  font-weight: bold;
}
</style>
